<!DOCTYPE html>
<html>
<head>
    <title>房源分配管理</title>
<#include "../common/common.ftl"/>
    <style>
        table td {
            text-align: center;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <blockquote class="layui-elem-quote layui-bg-white">
        <p>${(zsProject.projectName)!}安置房源分配</p>
    </blockquote>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-header">房源信息</div>
                <div class="layui-card-body">
                    <div class="layui-row">
                        <ul id="treeMenu"></ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md10">
            <div class="layui-card">
                <div class="layui-card-header">
                    楼盘图
                    <span style="margin-left: 15px;position: absolute" id="buildingInfo"></span>
                    <span style="margin-left: 40%">
                        <button type='button' class='layui-btn' id='submitBtn'>保存</button>
                    </span>
                    <span style="position: absolute;right: 30px;">
                    <#if dataDictList?? && dataDictList?size gt 0>
                        <#list dataDictList as dataDict>
                            <span class="layui-badge" style="background-color: ${(dataDict.color)!}">&nbsp;${(dataDict.name)!}&nbsp;</span>
                        </#list>
                    </#if>
                    </span>
                </div>
                <form class="layui-form" id="submitForm" action="">
                    <input type="hidden" name="azProjectId" value=""/>
                    <input type="hidden" name="buildNum" value=""/>
                    <input type="hidden" name="_t" value=""/>
                    <input type="hidden" name="zsProjectId" value="${zsProject.id}"/>
                    <div class="layui-card-body" id="housePictureArea">

                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="/layui/layui.js" charset="utf-8"></script>
<script src="/modules/business/house.js" charset="utf-8"></script>
<script>
    layui.config({
        base: '/modules/' //静态资源所在路径
    }).use(["tree", "jquery", "jmdf", "form"], function () {
        var tree = layui.tree, $ = layui.jquery, jmdf = layui.jmdf, form = layui.form;
        $.ajax({
            url: "loadTreeData",
            type: "post",
            data: {_t: new Date().getTime()},
            success: function (data) {
                var option = {
                    elem: '#treeMenu' //传入元素选择器
                    , nodes: [data],
                    click: function (node) {
                        onClick(node);
                    }
                };
                tree(option);
            }
        });

        function onClick(node) {
            var id = node.id;//id
            if (id == null || id == "")
                return;
            var buildNum = node.name;//buildNum
            loadHousePicture(id, buildNum);
        }

        //查询楼盘图数据
        function loadHousePicture(id, buildNum) {
            $("input[name='azProjectId']").val(id);
            $("input[name='buildNum']").val(buildNum);
            $.ajax({
                url: "loadHousePicture",
                type: "post",
                data: {azProjectId: id, buildNum: buildNum, zsProjectId:${zsProject.id}, _t: new Date().getTime()},
                success: function (data) {
                    var azProject = data.azProject;
                    $("#buildingInfo").html(azProject.projectName + buildNum + "号楼<i class='layui-icon layui-icon-tips' id='zsProjectHouseInfo' style='right: -20px;color: red;cursor: pointer' title='点击查看改楼具体分配信息'></i>");
                    var pictureHtml = "";
                    pictureHtml = getZsProjectHousePicture(data);
                    $("#housePictureArea").html(pictureHtml);
                    form.render();
                    //点击每个house的图层时，更新checkbox
                    houseStyleFunction();

                    //监听全选按钮
                    checkAllFunction();

                    //监听每层的全选按钮
                    checkFloorFunction();
                    $("#submitBtn").unbind();
                    //提交按钮
                    $("#submitBtn").click(function(){
                        submitFunction(id, buildNum);
                    });

                    $("#zsProjectHouseInfo").click(function(){
                        loadZsProjectHouseInfo(id,buildNum);
                    });

                }
            });
        }

        //点击每个house的图层时，更新checkbox
        function houseStyleFunction(){
            $(".houseStyle").click(function () {
                var input = $(this).find("input[type='checkbox']");
                var hiddenInput = $(this).find("input[type='hidden']");
                var houseStatus = input.attr("houseStatus");
                if (houseStatus == 2) {
                    layer.msg("已选房源不支持重新分配", {anim: 0, icon: 2, time: 1000});
                    return;
                }

                var flag = input.prop("checked");
                if (flag) {
                    input.prop("checked", false);
                    hiddenInput.val("");
                } else {
                    input.prop("checked", true);
                    hiddenInput.val(input.val());
                }
                form.render();
            });
        }

        //监听全选按钮
        function checkAllFunction(){
            form.on('checkbox(checkAll)', function (data) {
                var flag = $(this).prop("checked");
                $("input[name='floor'").each(function () {
                    $(this).prop("checked", flag);
                    updateHouseCheckBox($(this));
                });
                form.render();
            });
        }

        //监听每层的全选按钮
        function checkFloorFunction() {
            form.on('checkbox(checkFloor)', function (data) {
                updateHouseCheckBox($(this));
                form.render();
            });
        }
        //更新每层中house的checkbox
        function updateHouseCheckBox(obj) {
            var flag = obj.prop("checked");
            var floor = obj.val();
            $("input[floor='" + floor + "'").each(function () {
                var houseStatus = $(this).attr("houseStatus");
                if (houseStatus == 1) {  //已选房源不能更改
                    $(this).prop("checked", flag);
                    var hiddenInput = $(this).parent().find("input[type='hidden']");
                    if (flag){
                        hiddenInput.val($(this).val());
                    }else{
                        hiddenInput.val("");
                    }
                }
            });

        }

        //提交按钮事件
        function submitFunction(id, buildNum){
            var index = layer.load();
            $("input[name='_t']").val(new Date().getTime());
            $.ajax({
                type:"post",
                url:"saveZsProjectHouse",
                data:$("#submitForm").serialize(),
                success:function(data){
                    layer.close(index);
                    if (data.code == "0001"){
                        layer.msg("保存成功", {anim: 0, icon: 1, time: 1000});
                    }
                    loadHousePicture(id,buildNum);
                }
            })
        }

        //加载这栋楼分配的详细信息
        function loadZsProjectHouseInfo(id,buildNum){
            jmdf.view("loadZsProjectHouseInfo?azProjectId="+id+"&buildNum="+buildNum,"30");
        }
    });
</script>
</body>
</html>